
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		 [v-cloak]{
          display: none;
        }
	</style>
</head>
<body>
	<div id="app">
		<div v-cloak :style="{fontSize: fontSize + 'px'}">{{pmsg}}</div>
		<menu-item :parr="parr" @enlarge-text="handle($event)"></menu-item>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
	<script type="text/javascript">
		/*
			子组件向父组件传值 - 携带参数
				
		*/
		
		Vue.component('menu-item', {
			props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
			template: `
				<div>
					
					<ul>
						<li :key="index" v-for="(item, index) in parr">{{item}}</li>
					</ul>
					<button type="" @click="parr.push('lemon')">德辉</button>
					<button type="" @click="$emit('enlarge-text', 5)">扩大父组件中字体的大小</button>
					<button type="" @click="$emit('enlarge-text', 10)">扩大父组件中字体的大小10</button>
				</div>
			`
		})
		var vm = new Vue({
			el: '#app',
			data: {
				pmsg: '父组件中的内容',
				parr: ['apple', 'orange', 'banana'],
				fontSize: 10
			},
			methods: {
				handle: function(val) {
					// 扩大字体大小
					this.fontSize += val;
				}
			}
		})
	</script>
</body>
</html>